<template>
    <div class='_agent-modal'>
        <div class='agent-info'>
            <div class='item'>代理商名称：{{info.name || ''}}</div>
            <div class='item'>联系方式：{{info.mobile || ''}}</div>
            <div class='item'>设备数：{{info.totalDeviceCount || 0}}</div>
        </div>
        <div class='m-t-10'>
            <div id='agent-device-bar'>
                <agent-device-bar v-model='info.deviceData'></agent-device-bar>
            </div>
        </div>
        <div class='m-t-20'>
            <div class='color-fff' v-size.fontSize='16'>设备在线率</div>
            <div class='chart-pies'>
                <device-online-pie v-model='info.onlineData'></device-online-pie>
            </div>
        </div>
    </div>
</template>

<script>
import { Request } from '@/utils'
import agentDeviceBar from './agent-device-bar.vue'
import deviceOnlinePie from '../device-online-pie.vue'
export default {
    props : {
        value : {
            type : Number,
            default : 0
        }
    },
    data () {
        return {
            show : false,
            center : null,
            info : {
                deviceData : null,
                onlineData : null
            }
        }
    },

    components : {
        agentDeviceBar,
        deviceOnlinePie
    },

    created () {
        (new Request()).get('statistic/device/getAgentInfo', res => {
            var info = {
                name : '',
                mobile : '',
                totalDeviceCount : '',
                deviceData : [],
                onlineData : []
            }
            
            if(res.success && res.data) {
                var data = res.data
                var totalCount = data.totalDeviceNum || 0

                info.name = data.name
                info.mobile = data.mobile
                info.totalDeviceCount = totalCount

                if(data.deviceModeRspVoList) {
                    data.deviceModeRspVoList.forEach(item => {
                        var deviceCount = item.deviceNum || 0
                        var name = this.$store.state.vehicleTypeList[item.vehicleType]
                        info.deviceData.push({name : name, value : (deviceCount / totalCount).toFixed(1)})

                        info.onlineData.push({name : name, total : deviceCount, online : item.onlineNum || 0})
                    })
                }
            }

            this.info = info

        }, {agentId : this.value})
    },

    mounted () {

    }
}
</script>

<style scoped lang='scss'>
    ._agent-modal{
        width: 400px;
        background: rgba(63, 79, 112, 0.6);
        border: 3px solid rgba(168, 196, 225, 0.6);
        padding:15px 15px 30px 15px;

        .agent-info{
            font-size: 16px;
            color: #fff;
            .item{
                margin-top: 18px;
                &:first-child{
                    margin-top: 0;
                }
            }
        }

        .chart-pies{
            height: 80px;
            margin-top: 15px;
        }
    }


    #agent-device-bar{
        height: 210px;
    }
    
</style>